<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../utils/vue.min.js"></script>
		<!-- 引入axios -->
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

		<style>
			.flex-row{
				display: flex;
				flex-direction: row;
			}
			.flex-row2{
				display: flex;
				flex-direction: row;
				text-align: center;
			}
			.bgd{
				background-color: aquamarine;
				width: 200px;
				margin: 10px;
			}
		</style>
	</head>

	<body>
		<div id="app">
			<div>
				<input @keyup.enter="searchWeather()" v-model="curName" placeholder="请输入查询的城市" />
				<button type="button" @click="searchWeather">search</button>
				<!-- 北京 上海 广州 郑州 -->
				<div class="flex-row">
					<p v-for="item in city" @click="clickSearch(item)" style="width: 80px;">{{item}}</p>
				</div>
			</div>
			<!-- ------------------------------------------- -->
			<div class="flex-row2">
				<div v-for="item in fore" class="bgd">
						<p> {{item.type}}</p>
						<span>{{item.low}}</span> ~ <span>{{item.high}}</span>
						<p>{{item.date}}</p>
				</div>
			</div>
		</div>
	</body>
	<script src="../js/mainWeather.js"></script>
</html>
